<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PancakeSwap V3 流动性管理系统</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <style>
    :root {
      --primary-color: #ff6c37;
      --secondary-color: #1fc7d4;
      --dark-bg: #1a1a1a;
      --card-bg: #2d2d2d;
      --border-color: #444;
      --text-primary: #ffffff;
      --text-secondary: #b3b3b3;
      --success-color: #52c41a;
      --error-color: #ff4d4f;
      --warning-color: #faad14;
    }

    body {
      background: linear-gradient(135deg, var(--dark-bg) 0%, #0d1421 100%);
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      min-height: 100vh;
    }

    .navbar {
      background: rgba(26, 26, 26, 0.95) !important;
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-color);
    }

    .navbar-brand {
      font-weight: 700;
      color: var(--primary-color) !important;
    }

    .card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.2s ease;
    }

    .card:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: linear-gradient(45deg, var(--primary-color), #ff8c69);
      border: none;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 15px rgba(255, 108, 55, 0.4);
    }

    .btn-success {
      background: var(--success-color);
      border: none;
    }

    .btn-danger {
      background: var(--error-color);
      border: none;
    }

    .btn-warning {
      background: var(--warning-color);
      border: none;
      color: #000;
    }

    .status-indicator {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
    }

    .status-online { background: var(--success-color); }
    .status-offline { background: var(--error-color); }
    .status-warning { background: var(--warning-color); }

    .metric-card {
      text-align: center;
      padding: 1.5rem;
    }

    .metric-value {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .metric-label {
      color: var(--text-secondary);
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .log-container {
      background: #000;
      border-radius: 8px;
      padding: 1rem;
      font-family: 'Monaco', monospace;
      font-size: 0.8rem;
      max-height: 300px;
      overflow-y: auto;
    }

    .log-entry {
      margin-bottom: 0.25rem;
      line-height: 1.4;
    }

    .log-timestamp {
      color: #666;
      margin-right: 0.5rem;
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1050;
      max-width: 400px;
    }

    .form-control, .form-select {
      background: var(--dark-bg);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }

    .form-control:focus, .form-select:focus {
      background: var(--dark-bg);
      border-color: var(--primary-color);
      color: var(--text-primary);
      box-shadow: 0 0 0 0.2rem rgba(255, 108, 55, 0.25);
    }

    .text-primary-custom {
      color: var(--primary-color) !important;
    }

    .wallet-status {
      padding: 0.5rem 1rem;
      border-radius: 20px;
      font-size: 0.875rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .wallet-locked {
      background: rgba(255, 77, 79, 0.2);
      color: var(--error-color);
      border: 1px solid var(--error-color);
    }

    .wallet-unlocked {
      background: rgba(82, 196, 26, 0.2);
      color: var(--success-color);
      border: 1px solid var(--success-color);
    }

    .password-toggle {
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
    }

    .password-input-container {
      position: relative;
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><i class="fas fa-layer-group me-2"></i>PancakeSwap V3 管理系统</a>
      <div class="d-flex align-items-center">
        <span class="status-indicator status-online"></span>
        <span class="me-3">系统在线</span>
        <div id="walletStatus" class="wallet-status wallet-locked">
          <i class="fas fa-lock"></i>
          <span>钱包已锁定</span>
        </div>
      </div>
    </div>
  </nav>

  <div class="container-fluid mt-5 pt-4">
    <div class="row">
      <!-- 左侧边栏 -->
      <div class="col-md-3">
        <!-- 钱包管理卡片 -->
        <div class="card mb-4">
          <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-wallet me-2"></i>钱包管理</h5>
          </div>
          <div class="card-body">
            <div id="walletManagement">
              <!-- 钱包未创建状态 -->
              <div id="noWalletSection" class="text-center">
                <i class="fas fa-wallet fa-3x text-muted mb-3"></i>
                <p class="text-muted mb-3">尚未创建加密钱包</p>
                <button class="btn btn-primary w-100" onclick="showCreateWallet()">
                  <i class="fas fa-plus me-2"></i>创建钱包
                </button>
              </div>

              <!-- 钱包已创建但未解锁状态 -->
              <div id="walletLockedSection" style="display: none;">
                <div class="text-center mb-3">
                  <i class="fas fa-lock fa-2x text-warning mb-2"></i>
                  <p class="text-muted">钱包已锁定</p>
                </div>
                <div class="password-input-container mb-3">
                  <input type="password" id="unlockPassword" class="form-control" placeholder="输入解锁密码">
                  <i class="fas fa-eye password-toggle" onclick="togglePassword('unlockPassword')"></i>
                </div>
                <button class="btn btn-success w-100 mb-2" onclick="unlockWallet()">
                  <i class="fas fa-unlock me-2"></i>解锁钱包
                </button>
                <button class="btn btn-danger w-100" onclick="deleteWallet()">
                  <i class="fas fa-trash me-2"></i>删除钱包
                </button>
              </div>

              <!-- 钱包已解锁状态 -->
              <div id="walletUnlockedSection" style="display: none;">
                <div class="text-center mb-3">
                  <i class="fas fa-unlock fa-2x text-success mb-2"></i>
                  <p class="text-success">钱包已解锁</p>
                </div>
                <div class="d-grid gap-2">
                  <button class="btn btn-warning" onclick="lockWallet()">
                    <i class="fas fa-lock me-2"></i>锁定钱包
                  </button>
                  <button class="btn btn-primary" onclick="showWalletInfo()">
                    <i class="fas fa-info-circle me-2"></i>钱包信息
                  </button>
                  <button class="btn btn-danger" onclick="deleteWallet()">
                    <i class="fas fa-trash me-2"></i>删除钱包
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 策略管理卡片 -->
        <div class="card mb-4">
          <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-robot me-2"></i>策略管理</h5>
          </div>
          <div class="card-body">
            <div class="d-grid gap-2">
              <button class="btn btn-primary" onclick="openStrategyModal()">
                <i class="fas fa-cogs me-2"></i>策略管理
              </button>
              <button class="btn btn-success" onclick="refreshStrategies(); showStrategyTab('instances');">
                <i class="fas fa-play me-2"></i>策略实例
              </button>
              <button class="btn btn-warning" onclick="showStrategyTab('monitor');">
                <i class="fas fa-chart-line me-2"></i>执行监控
              </button>
            </div>
            <div class="mt-3">
              <small class="text-muted">
                <i class="fas fa-info-circle me-1"></i>
                创建和管理您的自动化交易策略
              </small>
            </div>
          </div>
        </div>

        <!-- 系统状态 -->
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>系统监控</h5>
          </div>
          <div class="card-body">
            <div class="row text-center">
              <div class="col-6">
                <div class="metric-card">
                  <div class="metric-value text-primary-custom" id="totalPools">0</div>
                  <div class="metric-label">总池数</div>
                </div>
              </div>
              <div class="col-6">
                <div class="metric-card">
                  <div class="metric-value text-success" id="activePools">0</div>
                  <div class="metric-label">活跃池</div>
                </div>
              </div>
              <div class="col-6">
                <div class="metric-card">
                  <div class="metric-value text-warning" id="totalValue">$0</div>
                  <div class="metric-label">总价值</div>
                </div>
              </div>
              <div class="col-6">
                <div class="metric-card">
                  <div class="metric-value text-info" id="systemUptime">0h</div>
                  <div class="metric-label">运行时间</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="col-md-9">
        <!-- 价格图表 -->
        <div class="card mb-4">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-chart-area me-2"></i>价格图表</h5>
            <select class="form-select w-auto" id="chartTimeframe">
              <option value="1h">1小时</option>
              <option value="24h" selected>24小时</option>
              <option value="7d">7天</option>
            </select>
          </div>
          <div class="card-body">
            <canvas id="priceChart" height="100"></canvas>
          </div>
        </div>

        <!-- 池子管理 -->
        <div class="card mb-4">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-swimming-pool me-2"></i>池子管理</h5>
            <button class="btn btn-primary" onclick="showCreatePosition()">
              <i class="fas fa-plus me-2"></i>创建头寸
            </button>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table class="table table-dark table-striped">
                <thead>
                  <tr>
                    <th>池子</th>
                    <th>价格范围</th>
                    <th>流动性</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="poolsTableBody">
                  <!-- 动态内容 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- 实时日志 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-terminal me-2"></i>系统日志</h5>
            <button class="btn btn-outline-secondary btn-sm" onclick="clearLogs()">
              <i class="fas fa-trash me-1"></i>清空
            </button>
          </div>
          <div class="card-body">
            <div class="log-container" id="logContainer">
              <!-- 动态日志内容 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 创建钱包模态框 -->
  <div class="modal fade" id="createWalletModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content bg-dark">
        <div class="modal-header border-secondary">
          <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i>创建加密钱包</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="alert alert-warning" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            请安全保存您的私钥和密码，丢失后无法找回！
          </div>
          <form id="createWalletForm">
            <div class="mb-3">
              <label for="privateKey" class="form-label">私钥</label>
              <div class="password-input-container">
                <input type="password" class="form-control" id="privateKey" placeholder="输入您的私钥（64位十六进制）" required>
                <i class="fas fa-eye password-toggle" onclick="togglePassword('privateKey')"></i>
              </div>
              <div class="form-text">私钥必须是64位十六进制字符串</div>
            </div>
            <div class="mb-3">
              <label for="encryptPassword" class="form-label">加密密码</label>
              <div class="password-input-container">
                <input type="password" class="form-control" id="encryptPassword" placeholder="输入加密密码" required>
                <i class="fas fa-eye password-toggle" onclick="togglePassword('encryptPassword')"></i>
              </div>
            </div>
            <div class="mb-3">
              <label for="confirmPassword" class="form-label">确认密码</label>
              <div class="password-input-container">
                <input type="password" class="form-control" id="confirmPassword" placeholder="再次输入密码" required>
                <i class="fas fa-eye password-toggle" onclick="togglePassword('confirmPassword')"></i>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer border-secondary">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" onclick="createWallet()">
            <i class="fas fa-lock me-2"></i>创建钱包
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 钱包信息模态框 -->
  <div class="modal fade" id="walletInfoModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content bg-dark">
        <div class="modal-header border-secondary">
          <h5 class="modal-title"><i class="fas fa-info-circle me-2"></i>钱包信息</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div id="walletInfoContent">
            <!-- 钱包信息内容 -->
            <div class="mb-3">
              <label class="form-label">钱包地址</label>
              <div class="input-group">
                <input type="text" class="form-control" id="walletAddress" readonly>
                <button class="btn btn-outline-secondary" onclick="copyToClipboard('walletAddress')">
                  <i class="fas fa-copy"></i>
                </button>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label">BNB余额</label>
              <input type="text" class="form-control" id="walletBalance" readonly>
            </div>
            <div class="mb-3">
              <label class="form-label">网络</label>
              <input type="text" class="form-control" id="networkName" readonly>
            </div>
            <div class="mb-3">
              <label class="form-label">连接状态</label>
              <div class="d-flex align-items-center">
                <span id="connectionStatus" class="badge bg-secondary me-2">未连接</span>
                <button class="btn btn-success btn-sm" onclick="connectWeb3()" id="connectWeb3Btn">
                  <i class="fas fa-plug me-2"></i>连接Web3
                </button>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label">文件路径</label>
              <input type="text" class="form-control" id="walletFilePath" readonly>
            </div>
          </div>
        </div>
        <div class="modal-footer border-secondary">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-info" onclick="refreshWalletInfo()">
            <i class="fas fa-sync me-2"></i>刷新
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 创建头寸模态框 -->
  <div class="modal fade" id="createPositionModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content bg-dark">
        <div class="modal-header border-secondary">
          <h5 class="modal-title"><i class="fas fa-cog me-2"></i>头寸配置管理</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <!-- 左侧：配置表单 -->
            <div class="col-md-6">
              <div class="card bg-secondary">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <h6 class="mb-0"><i class="fas fa-edit me-2"></i>头寸配置</h6>
                  <div>
                    <button class="btn btn-sm btn-success me-2" onclick="savePositionConfig()">
                      <i class="fas fa-save me-1"></i>保存配置
                    </button>
                    <button class="btn btn-sm btn-info" onclick="loadPositionConfig()">
                      <i class="fas fa-upload me-1"></i>加载配置
                    </button>
                  </div>
                </div>
                <div class="card-body">
                  <form id="positionConfigForm">
                    <!-- 配置名称 -->
                    <div class="mb-3">
                      <label for="configName" class="form-label">配置名称</label>
                      <input type="text" class="form-control" id="configName" placeholder="例如: WBNB-USDT主要配置">
                    </div>

                    <!-- 池地址 -->
                    <div class="mb-3">
                      <label for="poolAddress" class="form-label">池合约地址</label>
                      <div class="input-group">
                        <input type="text" class="form-control" id="poolAddress" 
                               placeholder="输入池合约地址" onchange="fetchPoolInfo()">
                        <button class="btn btn-outline-info" type="button" onclick="fetchPoolInfo()">
                          <i class="fas fa-search"></i>
                        </button>
                      </div>
                    </div>

                    <!-- 池信息显示 -->
                    <div id="poolInfoSection" class="mb-3" style="display: none;">
                      <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle me-2"></i>池信息</h6>
                        <div class="row">
                          <div class="col-6">
                            <strong>Token0:</strong> <span id="token0Symbol">-</span><br>
                            <small class="text-muted" id="token0Address">-</small>
                          </div>
                          <div class="col-6">
                            <strong>Token1:</strong> <span id="token1Symbol">-</span><br>
                            <small class="text-muted" id="token1Address">-</small>
                          </div>
                        </div>
                        <div class="mt-2">
                          <strong>当前价格:</strong> <span id="currentPrice">-</span><br>
                          <strong>当前Tick:</strong> <span id="currentTick">-</span>
                        </div>
                      </div>
                    </div>

                    <!-- 价格范围设置 -->
                    <div class="row">
                      <div class="col-6">
                        <div class="mb-3">
                          <label for="lowerPercent" class="form-label">下限百分比 (%)</label>
                          <input type="number" class="form-control" id="lowerPercent" 
                                 step="0.1" placeholder="例如: -10" onchange="updatePricePreview()">
                          <div class="form-text">相对当前tick的下浮百分比</div>
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="mb-3">
                          <label for="upperPercent" class="form-label">上限百分比 (%)</label>
                          <input type="number" class="form-control" id="upperPercent" 
                                 step="0.1" placeholder="例如: 10" onchange="updatePricePreview()">
                          <div class="form-text">相对当前tick的上浮百分比</div>
                        </div>
                      </div>
                    </div>

                    <!-- 价格范围预览 -->
                    <div id="pricePreviewSection" class="mb-3" style="display: none;">
                      <div class="alert alert-warning">
                        <h6><i class="fas fa-eye me-2"></i>价格范围预览</h6>
                        <div class="price-range-display">
                          <div class="d-flex justify-content-between">
                            <span>下限价格: <strong id="previewLowerPrice">-</strong></span>
                            <span>当前价格: <strong id="previewCurrentPrice">-</strong></span>
                            <span>上限价格: <strong id="previewUpperPrice">-</strong></span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 代币数量设置 -->
                    <div class="mb-3">
                      <label class="form-label">提供流动性</label>
                      <div class="row">
                        <div class="col-6">
                          <div class="input-group">
                            <span class="input-group-text" id="token0InputLabel">Token0</span>
                            <input type="number" class="form-control" id="token0Amount" 
                                   step="0.000001" placeholder="数量" onchange="calculateTokenAmounts(0)">
                          </div>
                        </div>
                        <div class="col-6">
                          <div class="input-group">
                            <span class="input-group-text" id="token1InputLabel">Token1</span>
                            <input type="number" class="form-control" id="token1Amount" 
                                   step="0.000001" placeholder="数量" onchange="calculateTokenAmounts(1)">
                          </div>
                        </div>
                      </div>
                      <div class="form-text">只需填写其中一个，系统会自动计算另一个</div>
                    </div>

                    <!-- 滑点设置 -->
                    <div class="mb-3">
                      <label for="slippagePercent" class="form-label">滑点容忍度 (%)</label>
                      <input type="number" class="form-control" id="slippagePercent" 
                             step="0.1" value="1" min="0.1" max="50">
                    </div>
                  </form>
                </div>
              </div>
            </div>

            <!-- 右侧：操作面板和配置列表 -->
            <div class="col-md-6">
              <!-- 操作面板 -->
              <div class="card bg-secondary mb-3">
                <div class="card-header">
                  <h6 class="mb-0"><i class="fas fa-play-circle me-2"></i>操作面板</h6>
                </div>
                <div class="card-body">
                  <div class="row g-2">
                    <div class="col-6">
                      <button class="btn btn-success w-100" onclick="executeCreatePosition()" id="createPositionBtn">
                        <i class="fas fa-plus me-2"></i>创建头寸
                      </button>
                    </div>
                    <div class="col-6">
                      <button class="btn btn-danger w-100" onclick="executeCloseAllPositions()" id="closeAllBtn">
                        <i class="fas fa-times me-2"></i>关闭所有头寸
                      </button>
                    </div>
                    <div class="col-6">
                      <button class="btn btn-primary w-100" onclick="executeStartStrategy()" id="startStrategyBtn">
                        <i class="fas fa-play me-2"></i>启动策略
                      </button>
                    </div>
                    <div class="col-6">
                      <button class="btn btn-warning w-100" onclick="executeStopStrategy()" id="stopStrategyBtn">
                        <i class="fas fa-stop me-2"></i>停止策略
                      </button>
                    </div>
                  </div>
                  
                  <!-- 用户地址设置 -->
                  <div class="mt-3">
                    <label for="userAddress" class="form-label">用户地址</label>
                    <input type="text" class="form-control" id="userAddress" 
                           placeholder="自动从钱包获取" readonly>
                    <button class="btn btn-sm btn-outline-info mt-1" onclick="loadUserAddressFromWallet()">
                      <i class="fas fa-wallet me-1"></i>从钱包获取
                    </button>
                  </div>

                  <!-- 策略实例ID设置 -->
                  <div class="mt-3">
                    <label for="strategyInstanceId" class="form-label">策略实例ID</label>
                    <input type="text" class="form-control" id="strategyInstanceId" 
                           placeholder="用于启动/停止策略">
                  </div>
                </div>
              </div>

              <!-- 保存的配置列表 -->
              <div class="card bg-secondary">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <h6 class="mb-0"><i class="fas fa-list me-2"></i>保存的配置</h6>
                  <button class="btn btn-sm btn-outline-danger" onclick="clearAllConfigs()">
                    <i class="fas fa-trash me-1"></i>清空全部
                  </button>
                </div>
                <div class="card-body">
                  <div id="savedConfigsList" class="list-group list-group-flush">
                    <!-- 动态加载的配置项 -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer border-secondary">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-info" onclick="resetConfigForm()">
            <i class="fas fa-redo me-2"></i>重置表单
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 策略管理模态框 -->
  <div id="strategyModal" class="modal" style="display: none;">
    <div class="modal-content large-modal">
      <div class="modal-header">
        <h2 id="strategyModalTitle">策略管理</h2>
        <span class="close" onclick="closeStrategyModal()">&times;</span>
      </div>
      <div class="modal-body">
        <div class="tab-container">
          <div class="tab-buttons">
            <button class="tab-btn active" onclick="showStrategyTab('strategies')">策略列表</button>
            <button class="tab-btn" onclick="showStrategyTab('instances')">策略实例</button>
            <button class="tab-btn" onclick="showStrategyTab('create')">创建策略</button>
            <button class="tab-btn" onclick="showStrategyTab('monitor')">执行监控</button>
          </div>

          <!-- 策略列表标签页 -->
          <div id="strategies-tab" class="tab-content active">
            <div class="section-header">
              <h3>已注册策略</h3>
              <button class="btn btn-primary" onclick="refreshStrategies()">刷新</button>
            </div>
            <div class="table-container">
              <table id="strategiesTable" class="data-table">
                <thead>
                  <tr>
                    <th>策略ID</th>
                    <th>策略名称</th>
                    <th>描述</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 动态填充 -->
                </tbody>
              </table>
            </div>
          </div>

          <!-- 策略实例标签页 -->
          <div id="instances-tab" class="tab-content">
            <div class="section-header">
              <h3>策略实例</h3>
              <button class="btn btn-primary" onclick="refreshInstances()">刷新</button>
            </div>
            <div class="table-container">
              <table id="instancesTable" class="data-table">
                <thead>
                  <tr>
                    <th>实例ID</th>
                    <th>策略ID</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>最后执行</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 动态填充 -->
                </tbody>
              </table>
            </div>
          </div>

          <!-- 创建策略标签页 -->
          <div id="create-tab" class="tab-content">
            <div class="section-header">
              <h3>创建新策略</h3>
            </div>
            <form id="createStrategyForm" class="form-grid">
              <div class="form-group">
                <label for="strategyId">策略ID:</label>
                <input type="text" id="strategyId" required placeholder="例如: my-strategy-v1">
              </div>
              <div class="form-group">
                <label for="strategyName">策略名称:</label>
                <input type="text" id="strategyName" required placeholder="例如: 我的交易策略">
              </div>
              <div class="form-group full-width">
                <label for="strategyDescription">策略描述:</label>
                <textarea id="strategyDescription" rows="3" placeholder="描述您的策略功能和用途"></textarea>
              </div>
              <div class="form-group full-width">
                <label for="strategyCode">策略代码:</label>
                <textarea id="strategyCode" rows="15" required placeholder="请输入策略代码（TypeScript/JavaScript）"></textarea>
              </div>
              <div class="form-group full-width">
                <label for="strategyConfig">默认配置 (JSON):</label>
                <textarea id="strategyConfig" rows="5" placeholder='{"param1": "value1", "param2": "value2"}'></textarea>
              </div>
              <div class="form-actions full-width">
                <button type="submit" class="btn btn-primary">注册策略</button>
                <button type="button" class="btn btn-secondary" onclick="resetCreateForm()">重置</button>
              </div>
            </form>
          </div>

          <!-- 执行监控标签页 -->
          <div id="monitor-tab" class="tab-content">
            <div class="section-header">
              <h3>策略执行监控</h3>
              <button class="btn btn-primary" onclick="refreshExecutionHistory()">刷新</button>
            </div>
            <div class="form-group">
              <label for="monitorInstanceId">选择实例:</label>
              <select id="monitorInstanceId" onchange="loadExecutionHistory()">
                <option value="">请选择策略实例</option>
              </select>
            </div>
            <div class="table-container">
              <table id="executionHistoryTable" class="data-table">
                <thead>
                  <tr>
                    <th>执行时间</th>
                    <th>执行结果</th>
                    <th>耗时(ms)</th>
                    <th>Gas使用</th>
                    <th>操作数量</th>
                    <th>详情</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 动态填充 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 创建策略实例模态框 -->
  <div id="createInstanceModal" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h2>创建策略实例</h2>
        <span class="close" onclick="closeCreateInstanceModal()">&times;</span>
      </div>
      <div class="modal-body">
        <form id="createInstanceForm" class="form-grid">
          <div class="form-group">
            <label for="instanceStrategyId">策略ID:</label>
            <input type="text" id="instanceStrategyId" readonly>
          </div>
          <div class="form-group full-width">
            <label for="instanceConfig">实例配置 (JSON):</label>
            <textarea id="instanceConfig" rows="10" required placeholder='{"poolAddress": "0x...", "userAddress": "0x...", "rebalanceThreshold": 0.05}'></textarea>
          </div>
          <div class="form-actions full-width">
            <button type="submit" class="btn btn-primary">创建实例</button>
            <button type="button" class="btn btn-secondary" onclick="closeCreateInstanceModal()">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 策略调度模态框 -->
  <div id="scheduleModal" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h2>设置策略调度</h2>
        <span class="close" onclick="closeScheduleModal()">&times;</span>
      </div>
      <div class="modal-body">
        <form id="scheduleForm" class="form-grid">
          <div class="form-group">
            <label for="scheduleInstanceId">实例ID:</label>
            <input type="text" id="scheduleInstanceId" readonly>
          </div>
          <div class="form-group">
            <label for="scheduleType">调度类型:</label>
            <select id="scheduleType" onchange="toggleScheduleOptions()">
              <option value="manual">手动执行</option>
              <option value="interval">定时间隔</option>
              <option value="cron">Cron表达式</option>
            </select>
          </div>
          <div id="intervalOption" class="form-group" style="display: none;">
            <label for="scheduleInterval">执行间隔 (秒):</label>
            <input type="number" id="scheduleInterval" min="60" value="300" placeholder="300">
          </div>
          <div id="cronOption" class="form-group" style="display: none;">
            <label for="scheduleCron">Cron表达式:</label>
            <input type="text" id="scheduleCron" placeholder="0 */5 * * * *">
          </div>
          <div class="form-group">
            <label for="scheduleEnabled">启用调度:</label>
            <input type="checkbox" id="scheduleEnabled" checked>
          </div>
          <div class="form-actions full-width">
            <button type="submit" class="btn btn-primary">设置调度</button>
            <button type="button" class="btn btn-secondary" onclick="closeScheduleModal()">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 通知容器 -->
  <div id="notificationContainer"></div>

  <!-- JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html> 